<template>
  <!-- <div v-if="type === 1">晴天</div>
  <div v-else-if="type === 2">阴天</div>
  <div v-else-if="type === 3">雨天</div>
  <div v-else-if="type === 4">下雪</div>
  <div v-else>不知道什么天气</div> -->

  <!-- 如果要切换多个元素，可以把元素放在template里面 -->
  <template v-if="type === 1">
    <div>晴天</div>
    <p>要出去旅游</p>
    <p>玩的开心</p>
  </template>
  <template v-else-if="type === 2">
    <div>阴天</div>
    <p>呆在家里吧</p>
    <p>好好看一本书</p>
  </template>
  <template v-else-if="type === 3">
    <div>雨天</div>
    <p>阴天适合睡觉</p>
    <p>好好睡一觉吧</p>
  </template>
  <template v-else-if="type === 4">
    <div>下雪</div>
    <p>下雪啦，我们出去堆雪人吧</p>
    <p>下雪啦，我们出去打雪仗吧</p>
  </template>
  <div v-else>不知道什么天气</div>

  <div v-if="isShow"> 使用 v-if 来做条件渲染</div>
  <div v-show="isShow"> 使用 v-show 来做条件渲染</div>

  <hr>
  <h3>列表渲染</h3>

  <h2>商品列表</h2>
  <ul>
    <template v-for="(product, index) in products" :key="index">
      <li v-if="product.isDiscount">
        {{ index + 1 }}. 打折商品： {{ product.name }}  {{ product.price }}元
      </li>
    </template>
  </ul>

  <h2>v-for遍历对象，第一个值是对象的值，第二值是对象的键，第三个值是索引</h2>
  <div v-for="(value, key, index) in stu" :key="index">
    {{ index }} - {{ key }} - {{ value }}
  </div>

  <h2>v-for 还可以接收一个整数值 n</h2>
  <div v-for="(item, index) in 5" :key="index">
    {{ item }}
  </div>

  <h2>深层次嵌套的v-for</h2>
  <ul>
    <li v-for="project in projects" :key="project.id">
      <h3>{{ project.name }}</h3>
      <ul>
        <li v-for="task in project.tasks" :key="task.id">
          <h4>{{ task.name }}</h4>
          <ul>
            <li v-for="(subtask, index) in task.subtasks" :key="index">
              {{ project.name }}- {{ task.name }} - {{ subtask }}
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  const type = ref(1)
  setInterval(() => {
    type.value = Math.floor(Math.random() * 5 + 1)
  }, 3000);

  /* v-show切换的是css的display属性，值如果为false的话，会将display属性设置为none */
  const isShow = ref(true)
  setTimeout(() => {
    isShow.value = false
  }, 2000);

  //列表渲染
  const products = ref([
    { name: '键盘', price: 99.99, isDiscount: false },
    { name: '鼠标', price: 59.99, isDiscount: true },
    { name: '显示器', price: 299.99, isDiscount: true }
  ])


  /* key属性主要是用于 优化虚拟DOM的渲染性能 */
  /* v-for遍历对象 */
  const stu = reactive({
    name: 'zhangsan',
    age: 18,
    gender: 'male',
    score: 100
  })

  /* 深层次嵌套数组 */
  const projects = ref([
    {
      id: 1,
      name: 'Project A',
      tasks: [
        {
          id: 1,
          name: 'Task A1',
          subtasks: ['Subtask A1.1', 'Subtask A1.2']
        },
        {
          id: 2,
          name: 'Task A2',
          subtasks: ['Subtask A2.1', 'Subtask A2.2']
        }
      ]
    },
    {
      id: 2,
      name: 'Project B',
      tasks: [
        {
          id: 1,
          name: 'Task B1',
          subtasks: ['Subtask B1.1', 'Subtask B1.2']
        },
        {
          id: 2,
          name: 'Task B2',
          subtasks: ['Subtask B2.1', 'Subtask B2.2']
        }
      ]
    }
  ])



</script>

<style lang="scss" scoped></style>
